import React, { useEffect, useState } from 'react';
import { Icon, message } from 'antd';
import AxCard from '@/components/AxBase/AxCard';
import './style.css';
import { AxButton } from '@/components/AxBase';
import { AxTable } from '@/components/AxList';
import { axconst } from '@/shared/axconst';
import {
  AxEditableContext,
  AxEditableForm,
  AxEditableSimple,
} from '@/components/AxForm/AxFormItem';
import { axurl } from '@/shared/axurl';
import { axhttp } from '@/shared/axhttp';

const url = {
  read: '/api/favorite/read',
  create: '/api/favorite/create',
  update: '/api/favorite/update',
  destroy: '/api/favorite/destroy',
};
const { getListX, postFormX } = axhttp;
const Purchase: React.FC<any> = props => {
  const [count, setCount] = useState(2);
  const [data, setData] = useState(axconst.initialList);
  const [loading, setLoading] = useState(false);
  /** 当前排序状态 */
  const [sort, setSort] = useState({});
  const [search, setSearch] = useState({});

  useEffect(() => {
    handleReadGoods();
  }, []);

  /** 获取商品列表 */
  const handleReadGoods = (p: any = {}) => {
    let params = {
      ...sort,
      ...search,
      ...p,
    };
    setLoading(true);
    getListX('/api/favorite/read', params)
      .then((res: any) => {
        setData(res);
      })
      .finally(() => {
        setLoading(false);
      });
  };

  /** 加入购物车 */
  const handleAddCart = (e: any, form: any, product: any) => {
    form.validateFields((error: any, values: any) => {
      if (error && error[e.currentTarget.id]) {
        return;
      }

      postFormX('/api/cart/read', null, {
        id: product.id,
        amount: values.count,
      }).then((res: any) => {
        setCount(count + (values.count || 0));
        message.success('加入购物车成功');
      });
    });
  };

  const columns = [
    {
      dataIndex: 'image',
      width: 110,
      render: (val: any) => {
        return (
          <img
            src={(val && val !== '' && val) || '/img/nopic.jpg'}
            style={{ height: 110, width: 110 }}
          />
        );
      },
    },
    {
      width: axconst.width.longx,
      render: (val: any, record: any) => {
        return (
          <div style={{ marginLeft: 16 }}>
            <h4 className="ant-list-item-meta-title">{record.name}</h4>
            <div className="ant-list-item-meta-description">{record.eName}</div>
          </div>
        );
      },
    },
    {
      width: axconst.width.long,
      render: (val: any, record: any) => {
        return (
          <div>
            <div>
              <span>产品规格：{record.productSpec}</span>
            </div>
            <div>
              <span>别名：{record.alias}</span>
            </div>
            {/* <div>
                            <span>分子式：{record.formula}</span>
                        </div>
                        <div>
                            <span>纯度：{record.purity}</span>
                        </div> */}
            <div>
              <span>
                危险源：
                {(record.dangerName &&
                  record.dangerName.length > 0 &&
                  record.dangerName.map((m: any) => (
                    <>
                      <span className="ax-manager">{m}</span>&nbsp;
                    </>
                  ))) ||
                  '无'}
              </span>
            </div>
          </div>
        );
      },
    },
    {
      width: axconst.width.long,
      render: (val: any, record: any) => {
        return (
          <div>
            <div>
              <span>单价：￥{record.price}</span>
            </div>
            <div>
              <span>库存：{record.stock}</span>
            </div>
            <div>
              <span>管控：{record.controlLevel}</span>
            </div>
          </div>
        );
      },
    },
    {
      width: axconst.width.long,
      render: (val: any, record: any) => {
        return (
          <div>
            <div>
              <span>包装：{record.packingUnit}</span>
            </div>
            <div>
              <span>性状：{record.character}</span>
            </div>
            <div>
              <span>销量：{record.saleAmount}</span>
            </div>
            <div>
              <span>分类名称：{record.categoryName}</span>
            </div>
          </div>
        );
      },
    },
    {
      width: 140,
      render: (val: any, record: any) => {
        return (
          <AxEditableForm>
            <AxEditableSimple
              style={{ width: 124 }}
              precision={0}
              step={1}
              min={1}
              cellType="number"
              editing={true}
              record={{ count: 1 }}
              dataIndex="count"
            />
            <AxEditableContext.Consumer>
              {form => {
                return (
                  <AxButton
                    className="ax-no-class"
                    style={{ marginTop: 6 }}
                    ghost
                    onClick={(e: any) => handleAddCart(e, form, record.id)}
                  >
                    <Icon type="shopping-cart" />
                    加入购物车
                  </AxButton>
                );
              }}
            </AxEditableContext.Consumer>
          </AxEditableForm>
        );
      },
    },
  ];

  return (
    <>
      <AxCard
        style={{ height: '100%', width: 1390 }}
        bodyStyle={{ paddingLeft: 0, paddingRight: 0 }}
      >
        <AxTable
          size="default"
          bordered={false}
          showHeader={false}
          checkboxModel={false}
          columns={columns}
          data={data}
          loading={loading}
        />
      </AxCard>
    </>
  );
};

export default Purchase;
